<template>
  <div id="app">
    <!-- <button>点击我进行登陆</button> -->
    <!-- 对话框组件封装测试 -->
    <dialog-modal  title='这是一个弹出框' @click="closeDialog"></dialog-modal>
    <my-button type="primary" @click="showDialog">点我弹出对话框</my-button>
    <my-dialog :dialogVisible="isDestroy" @close="closeDialog"></my-dialog>
    <my-mark class="myMark" :text="text" :display="isDestroy" :fontStyle="{size:16,color:'red'}" width="1600" height="1600">
    </my-mark>
    <button class="button" @click="handlenClick">按钮</button>


  </div>
</template>

<script>
import DialogModal from './components/dialogModal.vue'
import MyButton from './components/myButton.vue';
import MyDialog from './components/myDialog.vue';
import MyMark from './components/myMark.vue';

export default {
  name: 'App',
  components: {
    DialogModal,
    MyButton,
    MyDialog,
    MyMark
  },
  data(){
    return {
      text:"峰之鼎",
      isDestroy:false,
    }
  },
  methods:{
    showDialog(){
      this.isDestroy=true;
    },
    closeDialog() {
            this.isDestroy = false;
     },
    handlenClick(e){
      console.log('e :>> ', e);
    }
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.myMark{
  position: absolute;
  top:0px;
  left:0px;
}
.button{
  position: absolute;
  top:50px;
  left:50px;
}
</style>
